<template>
	<!-- 添加回收员页面 -->
	<view class="addRecover">
		<view class="addRecover-main">
			<!-- 回收员姓名 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle">回收员名称：</text>
				<input type="text" v-model="recyclerInfo.name" placeholder="请输入" />
			</view>
			<!-- 性别选择 -->
			<view class="sexChoice">
				<view class="sexChoice-title">性别：</view>
				<view class="choiceInfo man">
					<view class="redio" @tap="sexChoice(1)">
						<image v-if="recyclerInfo.sex==1"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>男</view>
				</view>
				<view class="choiceInfo">
					<view class="redio" @tap="sexChoice(2)">
						<image v-if="recyclerInfo.sex==2"
							src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/true.png" mode="">
						</image>
					</view>
					<view>女</view>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="addRecoverMain-content">
				<text class="contentTitle">回收员手机号：</text>
				<input type="tel" v-model="recyclerInfo.telphone" placeholder="请输入" />
			</view>
			<view class="addRecoverMain-content">
				<text class="contentTitle">回收员分类：</text>
				<!-- <multiselect-dropdown :options="dropdownOptions" :test="test" /> -->
				<!-- <MultiselectDropdown :options="dropdownOptions"></MultiselectDropdown> -->
				<uni-section style="width: 100%;" title="基础多选(可通过collapse-tags-num设置超过数量省略)" type="line">
					<view class="selectDropdown">
						<MultiselectDropdown v-model="value1" collapse-tags :collapse-tags-num="3" multiple
							dataKey="label" dataValue="value" :localdata="data" @change="change"></MultiselectDropdown>
					</view>
				</uni-section>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">地址:</view>
				<picker mode="region" @columnchange="sildeChange" @change="onDateChange" :range="array"
					class="multiPicker">
					<view class="getset">
						<view v-if="recyclerInfo.province==''" class="getSite-title siteRight">选择省市区/县</view>
						<view v-else>{{recyclerInfo.province}} {{recyclerInfo.city}} {{recyclerInfo.county}}</view>
						<view class="icon iconfont icon-xiangyoujiantou"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="addButton" @tap="pushRecover">添加</view>
	</view>
</template>

<script>
	import util from '../../component/commen/api/util';
	import MultiselectDropdown from "@/component/MultiselectDropdown .vue"
	export default {
		components: {
			MultiselectDropdown
		},
		data() {
			return {
				recyclerInfo: { //回收员信息
					name: "",
					sex: 1,
					telphone: "", //手机号
					money: 0.00,
					province: "", //省
					city: "", //市
					county: "", //区
					cate_id: [], //回收员类型id
				},
				value1: [],
				data: []
			};
		},
		watch: {
			value1(newval) {
				console.log('newval',newval);
				this.recyclerInfo.cate_id = newval
				// this.recyclerInfo.cate_id = newval.join(",")
			}
		},
		onShow() {
			this.getnotice()
		},
		methods: {
			sildeChange() {//选择地址

			},
			change(e) {
				console.log('e:', e);
			},
			onDateChange(value) { //选择地址
				// console.log(value)
				this.recyclerInfo.province = value.detail.value[0]
				this.recyclerInfo.city = value.detail.value[1]
				this.recyclerInfo.county = value.detail.value[2]
			},
			sexChoice(e) { //选择性别
				this.recyclerInfo.sex = e
			},
			pushRecover() { //点击提交
				// return console.log(Array.isArray(this.recyclerInfo.cate_id)); // 输出: true			
				const regex = /^1[3-9]\d{9}$/; //验证手机号正则式
				if (this.recyclerInfo.name == "") {
					return uni.showToast({
						title: "请输入回收员姓名！",
						icon: "none"
					})
				} else if (this.recyclerInfo.telphone == "") {
					return uni.showToast({
						title: "请输入回收员手机号！",
						icon: "none"
					})
				}else if(this.recyclerInfo.cate_id.length==0){
					return uni.showToast({
						title: "选择回收员类型！",
						icon: "none"
					})
				}else if (this.recyclerInfo.province == "") {
					return uni.showToast({
						title: "请选择地区！",
						icon: "none"
					})
				}
				if (!regex.test(this.recyclerInfo.telphone)) {
					return uni.showToast({
						title: "手机号格式错误！",
						icon: "none"
					})
				}
				var params = {
					do: "collectors",
					op: "register",
					uid: 0,
					name: this.recyclerInfo.name,
					sex: this.recyclerInfo.sex,
					telphone: this.recyclerInfo.telphone,
					money: this.recyclerInfo.money,
					province: this.recyclerInfo.province,
					city: this.recyclerInfo.city,
					county: this.recyclerInfo.county,
					cate_id:this.recyclerInfo.cate_id,
					piackid: uni.getStorageSync("packid")
				}
				util.requestWithSign(params).then(res => {
					console.log("添加结果", res)
					if (res.errno == 0) {
						uni.showModal({
							title: "添加成功！",
							showCancel: false,
							success() {
								uni.navigateBack()
							}
						})
					}
				})
			},
			getnotice() {
				var params = {
					do: "reserve",
					op: "cateList",
					partnerid: 0
				}
				util.requestWithSign(params).then(res => {
					console.log("分类信息：",res.data)
					res.data.forEach(item=>{
						var obj = {
							value:parseInt(item.id),
							label:item.name
						}
						this.data.push(obj)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addRecover {
		padding: 20rpx;
		box-sizing: border-box;

		.addRecover-main {
			background: #fff;
			border-radius: 20rpx;

			// padding: 20rpx;
			// box-sizing: border-box;
			.addRecoverMain-content {
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;

				.contentTitle {
					width: 35%;
					margin-right: 20rpx;
				}
			}

			.sexChoice {
				padding: 30rpx 20rpx;
				border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;

				.sexChoice-title {
					margin-right: 20rpx;
				}

				.choiceInfo {
					display: flex;
					align-items: center;

					.redio {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background: #f0f0f0;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.man {
					margin-right: 80rpx;
				}

			}

			.siteAddOrModify-info {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				margin-right: 20rpx;

				.title {
					margin-right: 20rpx;
				}

				.multiPicker {

					// border: 1px solid #f00;
					.getset {
						display: flex;
						align-items: center;

						.getSite-title {
							color: #666666;
						}

						.icon-xiangyoujiantou {
							margin-left: auto;
						}
					}
				}
			}
		}

		.addButton {
			width: 100%;
			padding: 30rpx 0;
			margin-top: 60rpx;
			box-sizing: border-box;
			text-align: center;
			background: #00b388;
			color: #fff;
			border-radius: 30rpx;
		}
	}
</style>